<script lang="ts">
    import { onDestroy } from "svelte";
    import { useCarouselContext } from "./Carousel.svelte";
    const ctx: any = useCarouselContext();

    const props = $props();
    const id = $props.id();
    ctx?.addItem({ ...props, id });

    onDestroy(() => {
        ctx?.removeItem(id);
    });
</script>
